<script setup>

</script>

<template>
<div class="app">
  <div class="title">
    <h2>基础信息</h2>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" inline>
      <el-form-item label="货物名称" prop="goodsName" class="input">
        <el-input v-model="form.goodsName" placeholder="请输入货物名称" />
      </el-form-item>

      <el-form-item label="长（m）" prop="length" class="input">
        <el-input v-model="form.length" placeholder="请输入长" />
      </el-form-item>

      <el-form-item label="宽（m）" prop="width" class="input">
        <el-input v-model="form.width" placeholder="请输入宽" />
      </el-form-item>

      <el-form-item label="高（m）" prop="height" class="input">
        <el-input v-model="form.height" placeholder="请输入高" />
      </el-form-item>

      <el-form-item label="体积(m³)" prop="volume" class="input">
        <el-input v-model="form.volume" placeholder="请输入体积" />
      </el-form-item>

      <el-form-item label="重量(kg)" prop="weight" class="input">
        <el-input v-model="form.weight" placeholder="请输入重量" />
      </el-form-item>

      <el-form-item label="价值(元)" prop="value" class="input">
        <el-input v-model="form.value" placeholder="请输入价值" />
      </el-form-item>

      <el-form-item label="计算单位">
        <el-select v-model="form.unitStatus" placeholder="请选择" clearable>
          <el-option label="个" value="个"></el-option>
          <el-option label="箱" value="箱"></el-option>
          <el-option label="瓶" value="瓶"></el-option>
          <el-option label="件" value="件"></el-option>
          <el-option label="台" value="台"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="备注信息" prop="remarks" id="bei">
        <el-input v-model="form.remarks" placeholder="请输入备注信息" />
      </el-form-item>

      <div class="bao">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-form>
  </div>

</div>
</template>

<style>
.title {
  margin-left: 50px;
}
.bao{
  text-align: right;
  padding: 100px;
}
.input{
  width: 300px;
}

#bei{
  width: 700px;
}

</style>

<script>
import {addGoodsmanagement,getGoodsmanagement, updateGoodsmanagement} from "@/api/goodsmanagement/goodsmanagement";
import {getCustomer} from "@/api/customer/customer";

export default {
  data() {
    return {
      form: {},
    }
  },

  created() {
    console.log( this.$route.query.id+"....."+(this.$route.query.id!==undefined))
    if(this.$route.query.id!==undefined){
      this.findCustomer();
    }
  },

  methods: {
    //修改回显
    findCustomer(){
      var id = this.$route.query.id;
      getGoodsmanagement(id).then(response => {
        this.form = response.data;
      });
    },

    //保存按钮
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateGoodsmanagement(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
              this.$router.push({ path: '/goodsmanagementindex' });
            });
          } else {
            addGoodsmanagement(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
              this.$router.push({ path: '/goodsmanagementindex' });
            });
          }
        }
      });
    },

    cancel() {
      this.$router.push({ path: '/goodsmanagementindex' })
    }

  }

}

</script>
